<template>
    <div>
        <div class="toolbar">
            <el-form :inline="true" :model="q" ref="saveChn" size="mini" label-width="90px">
                <el-form-item prop="id" label="收款ID:">
                    <el-input v-model="q.id" placeholder="请输入收款ID"></el-input>
                </el-form-item>
                 <el-form-item prop="id" label="账号名称:">
                    <el-input v-model="q.receipt_name" placeholder="请输入账号名称"></el-input>
                </el-form-item>
                <el-form-item v-if="$store.getters.userinfo.agency_type===2" prop="agency_id" label="所属子代:">
                  <select-agent v-model="q.agency_id" ></select-agent>
                </el-form-item>


                <el-form-item label="收款方式:">
                    <el-select v-model="q.receipt_type" clearable placeholder="请选择">
                        <el-option
                                v-for="(type,index) of RecepiptType"
                                :key="index"
                                :label="type.name"
                                :value="parseInt(type.id)"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="账号类型:">
                    <el-select :disabled="!q.receipt_type" v-model="q.receipt_method" clearable placeholder="请选择">
                        <el-option
                                v-for="(type, index) of getRecepiptMethodType()"
                                :key="index"
                                :label="type.name"
                                :value="parseInt(type.id)"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="支付类型:">
                    <el-select v-model="q.pay_types" multiple clearable placeholder="请选择">
                        <el-option
                                v-for="(type, index) of payType"
                                :key="index"
                                :label="type"
                                :value="parseInt(index)"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="展示条件:">
                    <el-select v-model="q.min_user_level" clearable placeholder="请选择">
                        <el-option
                                v-for="(type, index) of UserLevel"
                                :key="index"
                                :label="type"
                                :value="index"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="自助状态:">
                    <el-select v-model="q.auto_arrival" clearable placeholder="请选择">
                        <el-option :key="true" label="启用" :value="true"></el-option>
                        <el-option :key="false" label="禁用" :value="false"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="账号状态:">
                    <el-select clearable v-model="q.status" placeholder="请选择">
                        <el-option :key="true" label="启用" :value="true"></el-option>
                        <el-option :key="false" label="禁用" :value="false"></el-option>
                    </el-select>
                </el-form-item>
              <el-form-item label="限额状态:">
                <el-select clearable v-model="q.reached_daily_limit" placeholder="请选择">
                  <el-option :key="true" label="已达成" :value="true"></el-option>
                  <el-option :key="false" label="未达成" :value="false"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="可用状态:">
                <el-select clearable v-model="q.available" placeholder="请选择">
                  <el-option :key="true" label="可用" :value="true"></el-option>
                  <el-option :key="false" label="不可用" :value="false"></el-option>
                </el-select>
              </el-form-item>
                <!-- <el-form-item prop="min_accumulated_recharge" label="最小历史累积充值:">
                  <el-input
                    type="number"
                    v-model.number="q.min_accumulated_recharge"
                    placeholder="最小历史累积充值"
                    prefix-icon="el-icon-edit"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="max_accumulated_recharge" label="最大历史累积充值:">
                  <el-input
                    type="number"
                    v-model.number="q.max_accumulated_recharge"
                    placeholder="最大历史累积充值"
                    prefix-icon="el-icon-edit"
                  ></el-input>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="query">查询</el-button>
                    <el-button type="danger" @click="reload">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-row
                v-if="$store.getters.userinfo.agency_type===1"
                type="flex"
                class="row-bg btn-row"
                justify="end"
        >
            <el-button size="mini" @click="add" type="primary" icon="el-icon-plus">新增收款账号</el-button>
        </el-row>
        <el-table :data="listData.items" v-loading.body="listLoading" @sort-change="sortlist" size="mini" stripe border fit highlight-current-row >
            <el-table-column prop="id" label="收款ID" min-width="80"></el-table-column>
            <el-table-column prop="pay_method" label="收款方式" min-width="100">
                <template slot-scope="scope">{{RecepiptType.find((n)=>n.id===scope.row.receipt_type).name}}</template>
            </el-table-column>
            <el-table-column prop="receipt_method" label="帐号类型" min-width="100">
                <template slot-scope="scope">
                    {{RecepiptType.find((n)=>n.id===scope.row.receipt_type).children.find((n)=>n.id===scope.row.receipt_method).name}}
                </template>
            </el-table-column>
            <el-table-column label="账号名称" min-width="180">
                <template slot-scope="scope">
                    {{scope.row.first_name}}{{scope.row.last_name}}{{scope.row.nickname}}{{scope.row.mch_name}}
                </template>
            </el-table-column>
            <el-table-column prop="account" label="账号详情" min-width="190"></el-table-column>
            <el-table-column  label='所属子代' min-width="130"
                             v-if="$store.getters.userinfo.agency_type===2">
                <template slot-scope="scope">{{scope.row.agency.user_name || scope.row.agency.nickname}}</template>
            </el-table-column>
            <el-table-column label="支付类型" min-width="130">
                <template slot-scope="scope"><span v-for="(item, index) in scope.row.pay_types" :key="index">{{payType[item]}}{{scope.row.pay_types.length===index+1?'':','}}</span>
                </template>
            </el-table-column>
            <el-table-column label="展示条件" min-width="130">
                <template slot-scope="scope">{{UserLevel[scope.row.min_user_level]}}</template>
            </el-table-column>
            <el-table-column label="自助状态" min-width="100">
                <template slot-scope="scope"><span :style="!scope.row.auto_arrival?'color:red':''">{{scope.row.auto_arrival?'启用':'禁用'}}</span></template>
            </el-table-column>
            <el-table-column label="账号状态" min-width="100">
                <template slot-scope="scope"><span :style="!scope.row.status?'color:red':''">{{scope.row.status?'启用':'禁用'}}</span></template>
            </el-table-column>
             <el-table-column label="限额状态" min-width="100">
                <template slot-scope="scope"><span :style="scope.row.reached_daily_limit?'color:red':''">{{scope.row.reached_daily_limit?'已达成':'未达成'}}</span></template>
            </el-table-column>
             <el-table-column label="可用状态" min-width="100">
                <template slot-scope="scope"><span :style="!scope.row.available?'color:red':''">{{scope.row.available && !scope.row.reached_daily_limit ? '可用':'不可用'}}</span></template>
            </el-table-column>
            <el-table-column prop="created_at" label="创建时间" sortable min-width="140"></el-table-column>
            <el-table-column prop="updated_at" label="更新时间" sortable min-width="140"></el-table-column>

            <el-table-column label="操作" width="140" fixed="right">
                <template slot-scope="scope">
                    <el-row>
                        <el-col :span="12" style="text-align:center">
                            <el-button
                                    v-if="$store.getters.userinfo.agency_type===1"
                                    :type="scope.row.status?'warning':'success'"
                                    size="mini"
                                    @click="disable(scope.row)"
                            >{{scope.row.status?'禁用':'启用'}}
                            </el-button>
                        </el-col>
                        <el-col :span="12" style="text-align:center">
                            <el-button type="primary" size="mini" @click="update(scope.row)">
                                {{$store.getters.userinfo.agency_type===1?'编辑':'查看'}}
                            </el-button>
                            <!-- <el-button style="width:68px;" type="danger" size="mini" @click="remove(scope.row)">删除</el-button> -->
                        </el-col>
                    </el-row>


                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="q.page_no"
                    :page-sizes="$store.state.app.pageSizeArr"
                    :page-size="q.page_size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listData.total"
            ></el-pagination>
        </div>
        <qr-code v-if="showQrcode" :showDialog.sync="showQrcode" :infoModel="showModel"></qr-code>
        <save-update v-if="showUpdate" :showUpdate.sync="showUpdate" :id="show_id"></save-update>
    </div>
</template>

<script>
    import saveUpdate from './saveUpdate'
    import {
        getAgencyReceiptList,
        deleteAgencyReceipt,
        disabledAgencyReceipt
    } from '@/api'
    import qrCode from './qrcode.vue'
    import SelectAgent from '@/components/SelectAgent/index.vue'
    import {queryFilter} from '@/utils/patch'
    import {useVcode} from "../../utils/CommonJs";

    export default {
        components: {qrCode, saveUpdate,SelectAgent},
        data() {
            return {
                listData: {},
                q: {page_size: 30, page_no: 1, pay_types: []},
                listLoading: false,
                showUpdate: false,
                settleCycle: this.$store.state.app.settleCycle,
                show_id: null,
                RecepiptType: this.$store.state.app.RecepiptType,
                payType: this.$store.state.app.payType,
                UserLevel: this.$store.state.app.UserLevel,
                showQrcode: false,
                showModel: null
            }
        },
        activated() {
            this.getList()
        },
        deactivated() {
            this.listLoading = false
        },
        methods: {
            getMenberInfo() {
                this.$store.dispatch('GetInfo')
            },
            add() {
                this.showAdd()


            },
            showAdd() {
                this.show_id = null
                this.showUpdate = true
            },
            update(row) {

                this.show_id = row.id
                this.showUpdate = true

            },
            disable(row) {
                let messageStr = `禁用后下次开启前该账号无法再使用，是否确定禁用？`
                let statusStr = '禁用'
                let messageTitle = '禁用收款账号'
                if (!row.status) {
                    messageStr = `确认启用ID为${row.id}收款账号？`
                    statusStr = '启用'
                    messageTitle = '启用收款账号'
                }
                this.$confirm(
                    messageStr,
                    messageTitle,
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    useVcode(this, () => {
                        disabledAgencyReceipt({status: !row.status}, row.id).then(res => {
                            if (res.status === 0) {
                                this.$message({type: 'success', message: `${statusStr}成功!`})
                                this.getMenberInfo();
                                this.getList()
                            }
                        })
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消禁用'
                    })
                })
            },
            remove(row) {
                this.$confirm(`确认删除ID为${row.id}的项么？`, '删除收款账号', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        deleteAgencyReceipt(row.id).then(res => {
                            if (res.status === 0) {
                                this.$message({type: 'success', message: '删除成功!'})
                                this.getList()
                            }
                        })
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    })
            },
            query() {
                this.q = Object.assign(this.q, {page_no: 1, page_size: 30})
                this.getList()
            },
            reload() {
                this.q = {page_size: 30, page_no: 1, pay_types: []}
                this.getList()
            },
            sortlist(sort) {
                this.q.$orderby = sort.prop
                this.getList()
            },
            handleSizeChange(val) {
                this.q.page_size = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.q.page_no = val
                this.getList()
            },
            getList() {
                let queryobj = Object.assign({}, this.q, {pay_types: `[${this.q.pay_types}]`})
                queryFilter(queryobj)
                getAgencyReceiptList(queryobj).then(res => {
                    if (res.status === 0) {
                        this.listLoading = false
                        this.listData = res.data
                    }
                })
            },
            showQR(obj) {
                this.showModel = obj
                this.showQrcode = true
            },
            showStr(obj) {
                let str = ''
                if ([1].includes(obj.receipt_method) && [1].includes(obj.pay_method)) {
                    str = '支付宝账号' + obj.account
                } else if ([2].includes(obj.pay_method)) {
                    str = '吱口令' + obj.account
                } else if ([5].includes(obj.receipt_method)) {
                    str =
                        '开户行' +
                        this.$store.state.app.BankCode[obj.bank_code] +
                        '卡号尾数' +
                        obj.account.slice(-4)
                }
                return str
            },
            getRecepiptMethodType() {
                if (!this.q.receipt_type) {
                    return []
                }
                return this.RecepiptType.find((n) => n.id === this.q.receipt_type).children
            },
        },
        watch: {
            showUpdate() {
                if (!this.showUpdate) {
                    this.getList()
                }
            },
            'q.receipt_type'(val, oldVal) {
                if (val != oldVal) {

                    this.$set(this.q, 'receipt_method', null)


                }
            },
            'q.min_accumulated_recharge'(val) {
                if (val < 0) {
                    this.$set(this.q, 'min_accumulated_recharge', null)
                }
            },
            'q.max_accumulated_recharge'(val) {
                if (val < 0) {
                    this.$set(this.q, 'max_accumulated_recharge', null)
                }
            }
        }
    }
</script>
<style scoped>
    .el-select {
        width: 158px
    }
</style>

